<template>
    <div class="register" ref="fullHeightElement">
        <div class="content">
            <h1>欢迎注册</h1>
            <el-form status-icon :label-position="labelPosition" :model="form" ref="ruleForm" :rules="rules">
                <el-form-item prop="userAccount">
                    <el-input v-model="form.userAccount" placeholder="请输入账号" size="small">
                        <i slot="prefix" class="el-input__icon el-icon-user"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" type="password" placeholder="请输入密码" size="small">
                        <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名" size="small">
                        <i slot="prefix" class="el-input__icon el-icon-s-custom"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="userTel">
                    <el-input v-model="form.userTel" placeholder="请输入电话号码" size="small">
                        <i slot="prefix" class="el-input__icon el-icon-phone-outline"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱" size="small">
                        <i slot="prefix" class="el-input__icon el-icon-message"></i>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" size="small" @click="register('ruleForm')">注册</el-button>
            <p>已有帐户？<span @click="goLogin">登录</span></p>
        </div>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
    name: 'Register',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        const checkUserAccount = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('账号不能为空'));
            } else {
                callback();
            }
        };
        const checkPassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('密码不能为空'));
            } else {
                callback();
            }
        };
        const checkUserName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('用户名不能为空'));
            } else {
                callback();
            }
        };
        const checkTel = (rule, value, callback) => {
            let reg = /^1[3|4|5|8][0-9]\d{4,8}$/
            if (value === '') {
                callback(new Error('请输入电话号码'));
            } else if (!reg.test(value)) {
                callback(new Error('手机号码格式不正确，请输入11位手机号'));
            } else {
                callback();
            }
        };
        const checkEmail = (rule, value, callback) => {
            // let reg = /^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/
            let reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.\w{2,}$/
            if (value === '') {
                callback(new Error('请输入邮箱'));
            } else if (!reg.test(value)) {
                callback(new Error('邮箱格式不正确'));
            } else {
                callback();
            }
        };
        return {
            labelPosition: 'right',
            form: {
                userAccount: '',
                password: '',
                username: '',
                userTel: '',
                email: '',
                avatarUrl: this.defaultUrl
            },
            defaultUrl: require('../../assets/logo.0a3252a6.png'),
            baseHeight: 1,
            rules: {
                userAccount: [{ validator: checkUserAccount, trigger: 'change' }],
                password: [{ validator: checkPassword, trigger: 'change' }],
                username: [{ validator: checkUserName, trigger: 'change' }],
                userTel: [{ validator: checkTel, trigger: 'change' }],
                email: [{ validator: checkEmail, trigger: 'change' }],
                // type: [{ validator: checkType, trigger: 'blur' }]
            }
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        // 设置元素高度为窗口高度
        this.$refs.fullHeightElement.style.height = `${window.innerHeight - this.baseHeight}px`;

        // 添加窗口大小改变的监听
        window.addEventListener('resize', this.handleResize);
    },
    methods: {
        ...mapMutations('userStore', ['userRegister']),
        handleResize() {
            this.$refs.fullHeightElement.style.height = `${window.innerHeight}px`;
        },
        register(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.form.type !== '') {
                        this.userRegister(this.form)
                    } else {
                        alert('请选择登录角色')
                    }
                } else {
                    return false;
                }
            });

        },
        goLogin() {
            this.$router.push('/login')
        }
    },
    beforeDestroy() {
        // 清除监听
        window.removeEventListener('resize', this.handleResize);
    },

};
</script>
<style lang='less' scoped>
.register {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .content {
        width: 450px;
        height: 400px;
        border-radius: 5px;
        border: 1px solid #333;
        padding: 20px 40px;
        /*background-color: rgb(236 232 219);*/

        h1 {
            width: 100%;
            text-align: center;
            padding-bottom: 20px;
            font-weight: 550;
            color: rgb(26, 26, 26);
        }

        .el-form-item {
            margin-bottom: 10px !important;

            .el-select {
                width: 100%;

            }
        }



        .el-button--primary {
            width: 100%;
            background-color: #333;
            color: white;
            margin-top: 15px;
            border-color: #444;
        }

        p {
            float: right;
            font-size: 12px;
            color: rgb(119, 118, 118);
            margin-top: 10px;

            span {
                cursor: pointer;
                color: rgb(10, 148, 203);
            }

            span:hover {
                text-decoration: underline;
            }
        }
    }
}
</style>